<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<!-- 阻止默认事件 -->
			<a href="https://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

			<!--阻止事件冒泡（常用）-->
			<div class="demo1" @click="fun1">
				<button @click.stop="fun2">点我提示信息</button>
			</div>

			<!--修饰符也可以连用，例如下面事例是即阻止冒泡同时也阻止默认行为-->
			<div class="demo1" @click="fun1">
				<a href="https://www.google.com.tw" @click.prevent.stop="showInfo">谷歌台湾</a>
			</div>

			<!-- 事件只触发一次 -->
			<button @click.once="showInfo">只触发一次</button>

			<!-- 事件捕获模式 -->

			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>



			<!-- 只有event.target是当前操作的元素时才触发事件(变相阻止冒泡） -->
			<div class="demo1" @click.self="fun1">
				<button @click="fun2">点我提示信息</button>
			</div>

			<!-- passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
			scroll滚动条一滚动就会触发的事件 wheel鼠标滚轮事件-->
			<ul class="list" @scroll.passive="test">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>


		<script type="text/javascript">
			const vm = new Vue({
				el: "#root",
				data: {

				},
				methods: {
					showInfo() {
						console.log("Hello")
					},
					fun1() {
						console.log("fun1")
					},
					fun2() {
						console.log("fun2")
					},
					showMsg(msg) {
						console.log(msg)
					},
					test() {
						for (let i = 1; i <= 100000; i++) {
							console.log(i)
						}
					}
				}
			})
		</script>

		<style>
			* {
				margin: 20px;
			}

			.demo1 {
				height: 100px;
				background-color: aqua;
				padding: 20px;
			}

			.box1 {
				padding: 5px;
				background: deepskyblue;
			}

			.box2 {
				padding: 5px;
				background: orange;
			}

			.list {
				width: 200px;
				height: 200px;
				background: salmon;
				/* 如果内容溢出，则出现滚动条 */
				overflow: auto;
			}

			.list li {
				height: 100px;
			}
		</style>
	</body>
</html>